<template>
  <div class="op-group comp-op-common">
    <div class="op-title">按公式新增列</div>
    <div v-if="!isShowSub" class="option-item">
      <div class="title-row">
        <span class="label">根据"{{ selectedColumnName }}"按公式新增列</span>
        <a-button class="op-btn" type="primary" size="small" @click="showDetail"
          >编辑</a-button
        >
      </div>
    </div>
    <div v-if="isShowSub" class="detail-panel">
      <formula-form
        ref="formulaInput"
        :formula-value="formulaValue"
        @actiondone="doAction"
      ></formula-form>
      <div class="button-row">
        <a-button class="op-btn-sub" size="small" @click="cancel"
          >取消</a-button
        >
        <a-button
          class="op-btn-sub"
          type="primary"
          size="small"
          @click="doOption"
          >确定</a-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import FormulaForm from './formulaForm.vue'

@Component({
  components: {
    FormulaForm,
  },
})
export default class ColumnFormula extends Vue {
  @Prop({
    type: String,
    default() {
      return ''
    },
  })
  formulaValue: String | undefined

  private get formulaInstance() {
    return this.$refs.formulaInput as any
  }

  public get selectedColumnName() {
    return DataStore.tableSelectColumns[0].name
  }

  //  是否进入编辑模式
  private isShowSub: boolean = false

  //  点击取消 btn - 清空，关闭推荐面板
  public cancel() {
    this.isShowSub = false
    this.formulaInstance.cancel()
    //  hide c1 ,c2 in card
    DataStore.setShowColumnIndex(false)
  }

  public showDetail() {
    this.isShowSub = true
    //  show c1 ,c2 in card
    DataStore.setShowColumnIndex(true)
  }

  public doOption() {
    this.formulaInstance.doOption()
  }

  public doAction(actionInfo: any) {
    this.$emit('actiondone', {
      ...actionInfo,
    })
  }
}
</script>

<style lang="less" scoped>
@import url('../op.less');
</style>
